<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script type="text/javascript"></script>
        <meta charset="UTF-8">
        <title>在线计算器</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                color: black;
                
            }
            .content{
                width: 280px;      
                height: 510px;
                margin: 0 auto;
                background: white;
            }
            .bar {
                height: 20px;
                width: 100%;
                padding-top: 4px;
                box-sizing: border-box;
            }
            
          
            .screen{
                width: 260px;
                margin-left:10px;
                line-height: 140px;
                text-align: right;
                height: 85px;
                font-size: 40px;
                font-weight: lighter;
                overflow: hidden;
            }
            .btn{
                width: 70px;
                height: 70px;
                background: #F5F6F7;         
                font-size: 24px;
                text-align: center;
                line-height: 70px;
                float: left;
                box-sizing: border-box;
                border: 1px solid #000;
                cursor: pointer;
            }
            .btn:nth-of-type(1),
            .btn:nth-of-type(2),
            .btn:nth-of-type(3){
                background: #F5F6F7;
            }
            .btn:nth-of-type(4n){
                background: #F5F6F7;
            }
            .btn:nth-of-type(17){
                width: 140px;
            }
            .btn:nth-of-type(19){
                background: #F5F6F7;
            }
        </style>
        <script src="js/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div class="content">
            <div class="bar">
                <div style="background: #F5F6F7;height:30px;font-size:15px">简易计算器</div>
                
            
            <div class="screen"></div>
            <div class="btn_con">
                
              
                <div class="btn num">7</div>
                <div class="btn num">8</div>
                <div class="btn num">9</div>
                <div class="btn btn_divided calcu">÷</div>
              
                <div class="btn num">4</div>
                <div class="btn num">5</div>
                <div class="btn num">6</div>
                <div class="btn btn_multiplied calcu">×</div>
         
                <div class="btn num">1</div>
                <div class="btn num">2</div>
                <div class="btn num">3</div>
                <div class="btn btn_minus calcu">-</div>
                
                <div class="btn btn_reset">C</div>
                <div class="btn num">0</div>
                <div class="btn btn_equal">=</div>
                <div class="btn btn_plus calcu">+</div>

                <div style="background-color:#F5F6F7;">©2019 7gugu</div>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                var src_show =$(".screen");         
                src_show.html("0");
                var result ="",                       
                      result_1="",                     
                      result_2 = "";                  
                var change=0;                      
                var num = $(".num");               
                var equal = $(".btn_equal");       
                var calcu = $(".calcu");                
                var reset = $(".btn_reset");           
                var negtive = $(".btn_negtive"),       
                      neg=1;
                var del = $(".btn_delete");              
                negtive.click(function(){
                    if(src_show.text()=="0"){           
                        src_show.html("-0");
                        neg=0;
                    }else if(src_show.text()=="-0"){
                        src_show.html("0");
                        neg=1;
                    }else{                           
                        result=src_show.text();
                        if(neg==0){               
                            neg=1;
                        }else if(neg==1){          
                            neg=0;
                        }
                        result=-result;
                        src_show.html(result);
                    }
                })
              
                num.click(function(){
                    result+=$(this).text();
                    if(neg==0){
                        src_show.html(-result);
                    }else{
                        src_show.html(result);
                    }
                })
             
                calcu.click(function(){
                    result_1=parseFloat(src_show.text());
                    if($(this).hasClass("btn_plus")){
                        change=1;
                    }
                    if($(this).hasClass("btn_minus")){
                        change=2;
                    }
                    if($(this).hasClass("btn_multiplied")){
                        change=3;
                    }
                    if($(this).hasClass("btn_divided")){
                        change=4;
                    }
                    result="";
                    src_show.html("0");
                    neg=1;
                });
              
                equal.click(function(){
                    if(result==""){
                        result_1=parseFloat(src_show.text());
                    }else{
                        result_2 = parseFloat(src_show.text());
                    }
                    if(change ==1){
                        result = result_1+result_2;
                    }
                    if(change ==2){
                        result = result_1-result_2;
                    }
                    if(change ==3){
                        result = result_1*result_2;
                    }
                    if(change ==4){
                        result = result_1/result_2;
                    }
                    src_show.html(result);
                    if(result<0){
                        neg=0;
                    }else{
                        neg=1;
                    }
                    result="";
                });
          
                reset.click(function(){
                    src_show.html("0");
                    result ="";
                    result_1="";
                    result_2 = "";
                    change=0;
                    neg=1;
                });
            
                del.click(function(){
                    if(result.length==1||result==""){  
                        result="";
                        if(neg==1){
                            src_show.html("0");
                        }else if(neg==0){
                            src_show.html("-0");
                        }
                    }else{
                        result=result.substr(0,result.length-1);
                        if(neg==1){
                            src_show.html(result);
                        }else if(neg==0){
                            src_show.html(-result);
                        }
                    }
                })
            })
        </script>
    </body>
</html>
